<template>
    <div class="container">
        <div class="header">
            <van-icon class="header-left" 
             size="30" @click="goBack" name="arrow-left" />
             填写服务订单
        </div>
        <stateus-Bar item="0"/>
        <van-cell class="cell">
            <template #title>
                <van-image 
                    width="25"
                    height="25" 
                    :src="creatInfo.service.serviceImg"/>
                <span class="server-name">{{ creatInfo.service.serviceName }}</span>
            </template>

             <template #default>
                <div class="service-text">
                    服务内容
                </div>
             </template>
        </van-cell>

        <van-cell-group  class="cell">
            <van-cell>
                 <template #title>
                    就诊医院
                 </template>
                 <template #default>
                    <div @click="showHospital=true" >
                        {{ form.hospital_name || '请选择就诊医院' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
        </van-cell-group>

         <van-cell-group  class="cell">
            <van-cell>
                 <template #title>
                    就诊时间
                 </template>
                 <template #default>
                    <div @click="showStartTime=true" >
                        {{ currentDate || '请选择就诊时间' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>

            <van-cell>
                 <template #title>
                    陪诊师
                 </template>
                 <template #default>
                    <div @click="showCompanion=true" >
                        {{ companionName || '请选择陪诊师' }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>

            <!-- 地址 -->
            <van-cell>
                <template #title>
                    接送地址
                </template>
                <template #default>
                    <van-field
                    class="text"
                    input-align="right"
                    v-model="form.receiveAddress"
                    placeholder="请填写接送地址"
                    />
                </template>
            </van-cell>

             <van-cell>
                <template #title>
                    联系电话
                </template>
                <template #default>
                    <van-field
                    class="text"
                    input-align="right"
                    v-model="form.tel"
                    placeholder="请填写联系电话"
                    />
                </template>
            </van-cell>
        </van-cell-group>

         <van-cell-group title="服务需求" class="cell">
            <van-field
                    class="text"
                    style="height: 100px;"
                    v-model="form.demand"
                    placeholder="请简要描述您就诊的科室"
                    />
         </van-cell-group>

         <van-button class="sumbit" type="primary"
         size="large"
         @click="submit">
            提交订单
         </van-button>
<!-- 弹出框 -->
        <van-popup
            v-model:show="showHospital"
            position="bottom"
            :style="{ height: '30%' }"
        >
            <van-picker
                :columns="showHospColums"
                @confirm="showHospConfirm"
                @cancel="showHospital=false"
                />
        </van-popup>

            <!-- // 就诊时间 -->
        <van-popup
                v-model:show="showStartTime"
                position="bottom"
                :style="{ height: '30%' }"
            >
            <van-date-picker
                @confirm="showTimeConfirm"
                @cancel="showStartTime=false"
                title="选择年月"
                :min-date="minDate"
            />
        </van-popup>

        <!-- // 陪诊师 -->
         <van-popup
                v-model:show="showCompanion"
                position="bottom"
                :style="{ height: '30%' }"
            >
            <van-picker
                :columns="companionColums"
                @confirm="showCompanionConfirm"
                @cancel="showStartTime=false"
            />
        </van-popup>
<!-- 支付二维码 -->
        <van-dialog :show-confirm-button="false" v-model:show="showCode" >
            <van-icon name="cross" class="close" @click="closeCode" />
            <div>微信支付</div>
            <van-image width="150" height="150" :src="codeImg" />
            <div>请使用本人微信扫码支付</div>
        </van-dialog>

         
    </div>
</template>

<script setup>
import { onMounted,getCurrentInstance,reactive, ref ,computed} from 'vue';
import { useRouter } from 'vue-router'
import stateusBar from '../../components/stateusBar.vue'
import Qrcode from 'qrcode'

const {proxy} =getCurrentInstance()

const creatInfo = reactive({
    companion: [],
    hospitals: [],
    service:{}
})

onMounted(async() => { 
    const { data } =await proxy.$api.h5Companion()
    console.log(data)
    Object.assign(creatInfo, data.data)
    console.log("creatInfo",creatInfo)
})

const router = useRouter()

//点击返回
const goBack = () => { 
router.go(-1)
}

//form数据
const form = reactive({
})

//就诊医院
const showHospital = ref(false)

const showHospColums=computed(() => { 
    return creatInfo.hospitals.map(item => {
        return {
            text: item.name,
            value: item.id
        }
    })
})

//选择医院
const showHospConfirm = (item) => {
    console.log('item', item)
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    showHospital.value = false
}

//就诊时间
const showStartTime = ref(false)

const currentDate = ref()

const minDate = ref(new Date())

//提交时间
const showTimeConfirm = (item) => {
    const dateStr = item.selectedValues.join('-')
    form.starttime=new Date(dateStr).getTime()
    showStartTime.value = false
    currentDate.value = dateStr
}

//陪诊师
const showCompanion = ref(false)
const companionColums=computed(() => { 
    return creatInfo.companion.map(item => {
        return {
            text: item.name,
            value: item.id
        }
    })
})

const companionName = ref()
const showCompanionConfirm = (item) => { 

    form.companion_id = item.selectedOptions[0].value
    companionName.value = item.selectedOptions[0].text
    showCompanion.value = false
}
//支付弹窗
const showCode = ref(false)
const codeImg = ref('')
const closeCode = () => { 
    showCode.value = false
    router.push('/order')
}

//提交表单
const submit = async() => {
    const params = [
        "hospital_id",
        "hospital_name",
        "demand",
        "companion_id",
        "receiveAddress",
        "tel",
        "starttime"
    ]
    for (const i of params) {
        if (!form[i]) {
            showNotify({message:'请确认信息全部填写'})
            return
        }
    }
    const { data: orderRes } = await proxy.$api.createOrder(form)
    console.log(orderRes)
    Qrcode.toDataURL(orderRes.data.wx_code).then((url) => {
        showCode.value = true
        codeImg.value = url
    })
}

const show = ref(false);

</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>